<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .title {
            font-size: 30px;
        }
    </style>
</head>
<body>
<div class="title">h5页面</div>
<input id="myInput" type="text">
<div id="myContent"></div>
<script>
    // h5页面监听message事件
    var currentPort = ''
    window.addEventListener('message',(event)=>{
        if(event.data == 'trans_port'){
            //赋值全局的端口 通信端口
            currentPort = event.ports[0]
            if(currentPort){
                // 使用通信端口的onmessage接收消息
                currentPort.onmessage = (params) => {
                    document.querySelector('#myContent').innerText = params.data
                }
            }
        }
    })

     document.querySelector("#myInput").oninput  = (event) => {
        //h5回传消息给原生
        if(currentPort){
            currentPort.postMessage(event.target.value)
        }
     }
</script>
</body>
</html>